<template>
  <t-modal
    :title="title"
    :width="type === 'downloadCode' ? 500 : 832"
    :visible="visible"
    :footer="null"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <template v-if="type === 'add'">
      <div class="card-warp">
        <div class="card-item" @click="cardClick('normalForm')">
          <div class="img-box">
            <img src="~@/assets/img/report01.png" />
          </div>
          <div class="text-box">
            <div class="title">
              {{ $ct("buildNormalForm", "新建普通表单") }}
            </div>
            <div class="text">
              {{ $ct("DataCollection", "数据收集，事件跟进") }}
            </div>
          </div>
        </div>
        <!-- <div class="card-item" @click="cardClick('flowForm')">
					<div class="img-box">
						<img src="~@/assets/img/report02.png" />
					</div>
					<div class="text-box">
						<div class="title">新建流程表单</div>
						<div class="text">业务审批，任务协同</div>
					</div>
				</div> -->
        <!-- zhailei -->
        <!-- <div class="card-item" @click="cardClick('treeForm')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">树形表单(测试)</div>
            <div class="text">数据收集，事件跟进</div>
          </div>
        </div> -->
        <!--  -->
        <div class="card-item" @click="cardClick('createPage')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">
              {{ $ct("buildPageForm", "新建页面设计器") }}
            </div>
            <div class="text">{{ $ct("buildPageForm", "新建页面设计器") }}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('viewData')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">视图数据</div>
            <div class="text">视图数据</div>
          </div>
        </div>
      </div>
      <!-- <div class="text-center text-bold margin-top-sm">
				<a-tooltip placement="topLeft">
					<template slot="title">
						<span>{{$ct("BeCreateFromBank","基于空白开始创建")}}、{{$ct("BeCreateFromTemplate","基于模板开始创建")}}</span>
					</template>
					<span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
				</a-tooltip>
			</div> -->
    </template>
    <template v-else-if="type === 'preview'">
      <div style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('webPreview')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">{{ $ct("WEBPreview", "WEB端预览") }}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('h5Preview')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">{{ $ct("HPreview", "H5端预览") }}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('appPreview')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">{{ $ct("APPPreview", "APP端预览") }}</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span></span>
          </template>
          <span style="cursor: pointer;"
            >{{ $ct("HowToSelect", "如何选择") }}？</span
          >
        </a-tooltip>
      </div>
    </template>
    <template v-else-if="type === 'downloadCode'">
      <div style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('downloadWebCode')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">{{ $ct("DownloadWEB", "WEB端下载") }}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('downloadAppCode')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png" />
          </div>
          <div class="text-box">
            <div class="title">{{ $ct("AppDownload", "App端下载") }}</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span></span>
          </template>
          <span style="cursor: pointer;"
            >{{ $ct("HowToSelect", "如何选择") }}？</span
          >
        </a-tooltip>
      </div>
    </template>
  </t-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      title: this.$ct("FormPreview", "表单预览"),
    };
  },
  created() {},
  methods: {
    cardClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>
<style lang="less" scoped>
.card-warp {
  display: flex;
  flex-wrap: wrap;
}
.card-item {
  transition: 0.3s all;
  cursor: pointer;
  width: 181px;
  border: 1px solid #f0f2f5;
  border-radius: 10px;
  padding-bottom: 15px;
  margin: 0 10px 20px 10px;
  flex-shrink: 0;
  .img-box {
    padding: 40px 20px 20px;
    img {
      width: 100%;
    }
  }
}

.card-item:hover {
  transform: scale(1.02);
  border: 1px solid #1890ff;
  box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
}

.text-box {
  text-align: center;
  .title {
    font-size: 16px;
    color: #171a1d;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .text {
    font-size: 12px;
    color: rgb(206 206 206);
  }
}
</style>
